.@{prefix}-components-slider {
  position: relative;
  width: 100%;
  height: 12px;
  user-select: none;
  &-content {
    position: absolute;
    height: 12px;
    width: calc(100% - 10px);
    &-default {
      width: calc(100% + 10px);
      background: @primary-border-color;
    }
    &-active {
      width: 0;
      background: @primary-color;
    }
    &-default, &-active {
      top: 5px;
      height: 4px;
      position: absolute;
      left: 0;
    }
  }
  &-bar {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: @background-color;
    box-shadow: 0 2px 4px @button-shadow;
  }
}
